<template>
  <div class="upload-employee-info-contianer">
    <a-modal v-model:visible="state.modal.visible" :title="state.modal.title" @ok="handleOk" :width="750">
      <a-tabs v-model:activeKey="state.tabs.activeKey">
        <a-tab-pane key="1" tab="导入人员">
          <a-row>
            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <a-form-item style="padding-left: 70px;">
                第 <a-input-number style="width: 58%;" :min="1" v-model:value="state.form.current" /> 行开始
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <a-form-item>
                <a-radio v-model:checked="state.checks.codeChecked"
                  @click.prevent="() => { state.checks.codeChecked = !state.checks.codeChecked }">
                </a-radio>
                工号，第 <a-input-number style="width: 55%;" :min="1" v-model:value="state.form.code"
                  :disabled="!state.checks.codeChecked" /> 列
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <a-form-item>
                <a-radio v-model:checked="state.checks.nameChecked"
                  @click.prevent="() => { state.checks.nameChecked = !state.checks.nameChecked }">
                </a-radio>
                姓名，第 <a-input-number style="width: 55%;" :min="1" v-model:value="state.form.name"
                  :disabled="!state.checks.nameChecked" /> 列
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <a-form-item>
                <a-radio v-model:checked="state.checks.cardChecked"
                  @click.prevent="() => { state.checks.cardChecked = !state.checks.cardChecked }">
                </a-radio>
                卡号，第 <a-input-number style="width: 55%;" :min="1" v-model:value="state.form.card"
                  :disabled="!state.checks.cardChecked" /> 列
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <a-form-item>
                <a-radio v-model:checked="state.checks.orgChecked"
                  @click.prevent="() => { state.checks.orgChecked = !state.checks.orgChecked }">
                </a-radio>
                部门编号，第 <a-input-number style="width: 47%;" :min="1" v-model:value="state.form.org"
                  :disabled="!state.checks.orgChecked" /> 列
              </a-form-item>
            </a-col>
            <a-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
              <a-form-item>
                <a-radio v-model:checked="state.checks.roleChecked"
                  @click.prevent="() => { state.checks.roleChecked = !state.checks.roleChecked }">
                </a-radio>
                角色编号，第 <a-input-number style="width: 47%;" :min="1" v-model:value="state.form.role"
                  :disabled="!state.checks.roleChecked" /> 列
              </a-form-item>
            </a-col>
          </a-row>
          <div class="upload-container">
            <a-upload-dragger :before-upload="beforeUpload" name="file">
              <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
              </p>
              <p class="ant-upload-text">拖动文件 或 <span style="color: #5B7DFF;"> 点击选择</span> </p>
            </a-upload-dragger>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="导入人脸照片" force-render>Content of Tab Pane 2</a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive } from 'vue';
const useContent = () => {
  return {
    code: '',
    name: '',
    card: '',
    org: '',
    current: '',
    role: '',
  }
}
const state = reactive({
  form: useContent(),
  modal: {
    type: 0,
    title: '新增',
    visible: false,
  },
  checks: {
    codeChecked: true,
    nameChecked: false,
    cardChecked: false,
    orgChecked: false,
    roleChecked: false,
  },
  tabs: {
    activeKey: '1'
  }
})
// 打开弹窗
const openModal = async (code?: string) => {
  state.modal.visible = true
  if (code) {
    state.modal.title = '编辑'
    state.modal.type = 1
    // queryItem(code)
  } else {
    state.modal.type = 0
    state.form = useContent()
  }
};

const handleOk = () => {
  console.log('ok');
};

const beforeUpload = (file: any) => {
  console.log(file);
  return false;
};

defineExpose({
  openModal,
});
</script>
<style scoped lang='less'>
.upload-container {

  &:deep(.ant-upload-drag) {
    height: 200px;

    .ant-upload-drag-icon {
      margin-top: 40px;
    }

    .ant-upload-text {
      font-size: 14px;
    }
  }


}
</style>